<template>
  <div
    class="environmental-warning-page animate__faster animate__animated animate__fadeIn"
  >
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :equTypeValue="'15'"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          ></AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="warning-volatility-container">
      <div class="zhgd-data-report-header" header="环境监测">
        <div>
          <a-button type="primary" @click="handelExport()">导出</a-button>
          <!-- <a-button type="primary" @click="handelClick()">预警阀值</a-button> -->
        </div>
      </div>
      <div class="table-list" v-loading="tableLoading">
        <vxe-table
          height="99%"
          class="scrollbarStyle"
          align="center"
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :field="item.dataIndex"
            :title="item.title"
            min-width="150"
          >
          </vxe-column>
        </vxe-table>
      </div>
      <div>
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 弹框 -->
    <MonitoringModel
      :visible.sync="modalVisible"
      :block="block"
      :mixin="mixin"
    ></MonitoringModel>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/wisdom-beam/environmental-app/AssociativeSelectGroup";
import MonitoringModel from "./components/MonitoringModel.vue";
import { downLoadFileByArraybuffer } from "@/utils";
import {
  exportMonitoringHj,
  getMonitoringHjList,
  getHjJcQueryDate,
} from "@/api/wisdom-beam/green-app.js";
import { _getUUID } from "@/utils";
export default {
  components: {
    AssociativeSelectGroup,
    MonitoringModel,
  },
  data() {
    return {
      modalVisible: false,
      tableLoading: false,
      defaultTime: [],
      tableData: [],
      columns: [
        {
          title: "监测点",
          dataIndex: "equName",
          key: "equName",
          width: "200px",
        },
        {
          title: "采集时间",
          dataIndex: "colTime",
          key: "colTime",
          width: "200px",
          scopedSlots: { customRender: "colTime" },
        },
        {
          title: "PM2.5(μg/m³)",
          dataIndex: "pm25",
          key: "pm25",
          width: "150px",
        },
        {
          title: "PM10(μg/m³)",
          dataIndex: "pm10",
          key: "pm10",
          width: "200px",
        },
        {
          title: "PM100(μg/m³)",
          dataIndex: "tsp",
          key: "tsp",
          width: "200px",
        },
        {
          title: "温度(℃)",
          dataIndex: "tmp",
          key: "tmp",
          width: "200px",
          scopedSlots: { customRender: "tmp" },
        },
        {
          title: "湿度(%RH)",
          dataIndex: "rh",
          key: "rh",
          width: "200px",
          scopedSlots: { customRender: "rh" },
        },
        {
          title: "风速(m/s)",
          dataIndex: "ws",
          key: "ws",
          width: "200px",
          scopedSlots: { customRender: "ws" },
        },
        {
          title: "风力",
          dataIndex: "wpStr",
          key: "wpStr",
          width: "200px",
          scopedSlots: { customRender: "wpStr" },
        },
        {
          title: "风向",
          dataIndex: "wdStr",
          key: "wdStr",
          width: "200px",
          scopedSlots: { customRender: "wdStr" },
        },
        {
          title: "气压(kPa)",
          dataIndex: "pa",
          key: "pa",
          width: "200px",
          scopedSlots: { customRender: "pa" },
        },
        {
          title: "噪声(dB)",
          dataIndex: "zs",
          key: "zs",
          width: "200px",
          scopedSlots: { customRender: "zs" },
        },
      ],
      tableColumns: [],
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
          isDefault: true,
          allowClear: false,
        },
        //拌和站
        {
          type: "mixin",
          mode: "default",
          placeholder: "请选择监测点",
        },
        {
          type: "calendar",
        },
      ],
      activeDate: [],
      block: "",
      mixin: "",
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {},
  methods: {
    //导出
    handelExport() {
      this.tableLoading = true;
      let { block, mixin, defaultTime } = this;
      exportMonitoringHj({
        secCode: block,
        equCode: mixin,
        type: "0",
        startTime: defaultTime?.[0] || "",
        endTime: defaultTime?.[1] || "",
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "环境监测");
        })
        .finally((_) => {
          this.tableLoading = false;
        });
    },

    selectGroupChange(data) {
      this.block = this.filterkey(data.block);
      this.mixin = this.filterkey(data.mixin);
      this.pager.page = 1;
      this.getTableData();
    },
    //查找下拉框的key 和 label
    filterkey(data = undefined) {
      return data ? data.key : "";
    },
    filterLabel(data = undefined) {
      return data ? data.label : "";
    },
    handelClick() {
      this.modalVisible = true;
    },
    //监听分页
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //查询表格
    getTableData() {
      this.getDateList();
      this.tableLoading = true;
      let { page, pageSize } = this.pager;
      let { block, mixin, type, defaultTime } = this;
      getMonitoringHjList({
        secCode: block,
        equCode: mixin,
        startTime: defaultTime[0],
        endTime: defaultTime[1],
        type,
        page,
        pageSize,
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.result?.records || [];
          this.pager.total = data?.result?.total || 0;
          //表格某一列全部为0 则不显示
          this.tableColumns = [];
          this.columns.forEach((col) => {
            if (this.checkHasData(col.dataIndex, this.tableData)) {
              this.tableColumns.push(col);
            }
          });
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
          this.tableColumns = [];
        })
        .finally((_) => {
          this.tableLoading = false;
        });
    },
    checkHasData(key = "", data = []) {
      return data
        .map((v) => v[key])
        .flat()
        .some((v) => v != 0);
    },
    //查询有数据的日期列表
    getDateList() {
      let { block, mixin } = this;
      getHjJcQueryDate({
        secCode: block,
        equCode: mixin,
      })
        .then((res) => {
          let { data } = res;
          this.activeDate = data.result || [];
        })
        .catch((_) => {
          this.activeDate = [];
        });
    },
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.environmental-warning-page {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 0 10px 10px 10px;
  overflow: hidden;
  .warning-volatility-container {
    margin-top: 10px;
    flex: 1;
    .flex();
    flex-direction: column;
    background-color: #fff;
    .zhgd-data-report-header {
      padding: 20px 20px;
      background-color: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .table-list {
      flex: 1;
      height: 100%;
    }
  }
}
</style>
